<template>
    <div class="start">
    	<div class="head">
    		<img src="../../assets/login.png">
		</div>
		<div class="content">
			<div class="phone">
				<span>用户名 :</span><input id="user" type="text" placeholder="请输入手机号" v-model="username" maxlength="11">
				<!-- <mt-field label="用户名 :" placeholder="请输入手机号" v-model="username">
				</mt-field> -->
			</div>
			<div class="phone">
				<span>密码 :</span><input id="user" type="password" placeholder="请输入密码(默认为手机后6位)" v-model="password">
				<!-- <mt-field label="密码 :" placeholder="请输入密码(默认为手机后6位)" type="password" v-model="password">
				</mt-field> -->
			</div>
			<div class="login">
				<mt-button size="large" type="danger" @click="login">登录</mt-button>
			</div>
			<div class="other">
				<router-link to="">忘记密码？</router-link>
				<router-link to="/Reg">立即注册</router-link>
			</div>
		</div>
    </div>
</template>

<script>
	
	export default {
		name:'Login',
        data(){
        	return{
        		username:'',
        		password:''
        	}
        },
        computed:{
        	users(){
        		return this.$store.state.users
        	}
        },
        methods:{
        	login(){
        		var that = this;
        		var flag = false;
        		this.users.forEach(function(user){
        			if(user.username == that.username && user.password == that.password){
        				that.$store.commit('setName', user.name);
        				that.$store.commit('setSex', user.sex);
        				window.location.href = '/#/Conference';
        				flag = true;
        				return;
        			}
        		});
        		console.log(1);
        		if(!flag){
        			alert('用户名或密码错误，请重新输入！');
        		}
        	}
        }
	}
</script>

<style scoped lang="less">
	.start{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 111;
		background: #fff;
		.head{
			width: 100%;
			height: 4rem;
			img{width: 100%;height: 100%;}
		}
		.content{
			padding: 30px 30px;
			.phone{
				font-size: 0.5rem;
				border-bottom: 1px solid #999;
				width: 100%;
				input{
					border: none; 	
					outline: none;
					font-size: 0.3rem;
					width: 68%;
				}
				span{
					font-size: 0.34rem;
					color: #444;
				}
			}
			.login{
				margin-top:30px; 
			}
			.other{
				overflow: hidden;
				a{font-size: 0.3rem;margin-top: 5px;color: #888;}
				a:first-child{
					float: left;
				}
				a:last-child{
					float: right;
				};
			}
		}
		

	}
</style>